<template>
    <span class="classification-label-box">
        {{topicData.title}}
    </span>
</template>

<script>
export default {
    name: "ClassificationLabel",
    props:{
        topicData:{
            type:Object,
            default(){
                return {}
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import "../../assets/global.less";
//phone
@media only screen and (max-width: 576px){
    @max-width:20vw;
    @height:5vw;
    .classification-label-box{
        max-width: @max-width;
        margin:0 1vw;
        font-size: 3vw;
        font-weight: 400;
        color: #4E4E4E;
        line-height: @height;
        .line-ellipsis(1);
        &:hover{
            color:#0D78CD;
        }
        &:focus{
            color:#0D78CD;
        }
    }
}

//pc
@media only screen and (min-width: 576px){
    @max-width:100px;
    .classification-label-box{
        max-width:@max-width;
        cursor:pointer;
        margin:0 10px;
        font-size: 13px;
        font-weight: 400;
        color: #4E4E4E;
        line-height: 16px;
        .line-ellipsis(1);
        &:hover{
            color:#0D78CD;
        }
        &:focus{
            color:#0D78CD;
        }

    }
}
</style>